<template>
  <div class="timeLine">
    <div class="timeLine-center">
      <div class="timeLine-sjx">
        <div class="timeLine-sjxs">
          <span>应急处置流程</span>
        </div>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.flowTime"
            :color="activity.color">
            {{ activity.flowName }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TimeLine",
  props: {
    activities: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      reverse: false,
      value1: "",
      formInline: {
        date1: "",
        region: "",
        value: ""
      }
    };
  },
  methods: {
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.timeLine {
  width: 15%;
  height: 100%;
}

:deep(.el-timeline) {
  margin-left: 35px;
  margin-top: 30px;
}

.timeLine-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.timeLine-sjx {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
}

.timeLine-sjxs {
  padding: 10px 20px;

  span {
    border-left: 4px solid rgb(9, 139, 245);
    padding-left: 20px;
  }
}
</style>
